<template>
  <div v-if="Object.keys(paramInfo).length !== 0" class="zong">
    <table class="chima">
      <tr v-for="item in paramInfo.tables[0]" :key="item">
        <td v-for="k in item" :key="k">{{ k }}</td>
      </tr>
    </table>
    <table class="canshu">
      <tr v-for="item in paramInfo.set" :key="item">
        <td>{{ item.key }}</td>
        <td>
          {{ item.value }}
        </td>
      </tr>
    </table>

    <div v-if="paramInfo.image.length !== 0">
      <img :src="paramInfo.image" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  name: "DetailParamInfo",
  props: {
    paramInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>
<style scoped>
.zong {
  background-color: #fff;
}
table {
  width: 100%;
}
.chima tr {
  display: flex;
  width: 100%;
}
.chima tr td {
  flex: 1;
  line-height: 40px;
  font-size: 14px;
  height: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.canshu tr {
  display: flex;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.canshu tr td:nth-child(even) {
  padding-left: 30px;
  /* flex: 4; */
  color: red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
img {
  width: 100%;
}
</style>